<template>
  <div>
    <div class="item-color-box">
      {{ opera.name }}
    </div>
    <div class="flex-box">
      <el-cascader
        style="width:160px;"
        placeholder="请选择导航位置"
        :options="options"
        v-model="opera.option"/>
      
      <el-input
        style="width:160px;"
        placeholder="请输入导航名称"
        v-model="opera.label"
        clearable/>
    </div>
    

    <div 
      class="flex-box" 
      v-if="opera.option && opera.option[0] === 'others'">
      <div class="flex-box__item">
        <div class="el-upload__tip">小程序</div>
        <el-input
          placeholder="请输入内容"
          v-model="opera.app"
          clearable/>
      </div>

      <div class="flex-box__item">
        <div class="el-upload__tip">网页端</div>
        <el-input
          placeholder="请输入内容"
          v-model="opera.web"
          clearable/>
      </div>

      <div class="flex-box__item">
        <div class="el-upload__tip">优惠券名称</div>
        <el-input
          placeholder="请输入内容"
          v-model="opera.couponName"
          clearable/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    categoryList: Array,
    opera: Object,
    operaIndex: Number
  },
  data() {
    return {
      selectedOption: {
        option: [],
        name: null,
        app: null,
        web: null
      },
      options: [
        { value: 'contact', label: '客服' },
        { value: 'others', label: '其他' },
        { value: 'category', label: '分类', children: this.categoryList }
      ]
    };
  },
  watch: {
    // selectedOption() {
    //   this.$emit()
    // }
  }
};
</script>
